<template>
	<!-- 盲盒红包详情 -->
<view class="">
	<shopro-login-modal></shopro-login-modal>
	<view class="page">
				
		<view class="info">
			<view class="utilBox">
			</view>
			<view class="infoItem" v-for="(item,index) in infoArr" :key="index" @click="junit(item.path)">
				<view class="label">
					{{item.label}}
				</view>
				<view class="num">
					{{item.num}}
				</view>
			</view>
		</view>
		
		<view class="tips">
			领红包开盲盒，人满开奖
			<view class="desc">
				{{detailObj.winner_limit}}人中奖，{{detailObj.joiner_limit - detailObj.winner_limit}}人全额退款
			</view>
		</view>
		<view class="box">
			<view class="content">
				<view  class=" contentItem" v-for="(item,index) in redEnvelopeArr" :key="index" @click="openRedEnvelope(index)">
						<view v-if="item.val== 1" class="getItem">
							<view class="text">
								领
							</view>
						</view>
						<view v-if="item.val== 2" class="gotItem">
							<view class="textBox">
								<view class="textTop">
									已领取
									<view class="textBottom">
										人满后公布
									</view>
								</view>
								
							</view>
						</view>
						<view v-if="item.val== 3" class="gotItem">
							<view class="textBox">
								<view class="textTop" style="font-size: 32rpx;margin-top: 25rpx;">
									￥{{item.money}}
								</view>
								
							</view>
						</view>
				</view>
			</view>
			<text>已有{{ParticipateArr.length}}人领取红包，还差{{detailObj.joiner_limit - ParticipateArr.length}}人开奖</text>
			<view class="btn" v-if="btnType==1">
				<view class="animationBtn">
					<u-icon name="arrow-upward" size="40" style="margin-right: 24rpx;"></u-icon>
				</view>
				选择红包领取补贴
			</view>
			<button class="btn " v-if="btnType==2" @click="onShare" open-type="share">
					邀请好友领红包
			</button>
			<view class="btn " v-if="btnType==3">
				<view class="waitingBtn">
					活动已结束
				</view>
			</view>
		</view>
	
		<view class="arr">
			<view class="arrType">
				<view @click="changeArrType(index)" :class="arrActiveType==index ? 'typeItem' : 'typeItem activeTypeItem' " v-for="(item,index) in arrType" :key="index">
					{{item.name}}
				</view>
			</view>
			<view class="arrContent" v-show="arrActiveType==0">
				<view class="arrItem" v-for="(item,index) in ParticipateArr" :key="index">
					<image :src="item.member.avatar" mode=""></image>
					<view class="desc">
						<view class="name">
							{{item.member.nickname}}
						</view>
						<view class="time">
							参与时间：{{item.pay_time}}
						</view>
					</view>
				</view>
			
				<view class="moreText" v-if="ParticipateArr.length == detailObj.joiner_limit ? false : true ">
					更多信息开奖后公布
				</view>
			</view>
			<view class="arrContent" v-show="arrActiveType==1">
				<view class="detailObjDest" v-html="detailObj.activity_desc">
					
				</view>
			</view>
		</view>
	
	<!-- 选择支付方式 start -->
	<bottomPopup ref="selectPay">
		<view class="selectPay">
			<view class="title">
				请选择支付方式
			</view>
			<view class="selectArr">
				<view class="selectItem" v-for="(item,index) in selectPayArr" :key="index">
					<view class="label">
						{{item.label}}
					</view>
					<view class="right-box" @click="changeSelectPay(index)">
						<u-switch  disabled activeColor="#ff652e" inactiveColor="#E5E5E5" v-model="item.val" ></u-switch>
					</view>
				</view> 
			</view>
			<view class="btn" @click="goPay">
				立即支付
			</view>
		</view>
	</bottomPopup>
	<!-- 选择支付方式 end -->
	
	<!-- 红包 -->
	<redEnvelope ref="redEnvelope" @goLuckyDraw="goLuckyDraw"></redEnvelope>
	<!-- 中奖 -->
	<view class="prizeBox" v-if="prizeType==1">
		<view class="winContent">
				<view class="closeIcon" @click="prizeType=0">
					<u-icon name="close" color="#fff" size="35"></u-icon>
				</view>
				<image @click="goThisActiveDetail" class="icon" src="http://shiliu.gdxuanbao.com/gifItem.gif" mode="widthFix"></image>
				<view class="giftArr">
					<view class="tipsText">
						恭喜您中奖！
					</view>
					<view class="giftItem" v-for="(item,index) in giftArr" :key="index">
						{{item}}
					</view>
				</view>
		</view>
	</view>
	
	<!-- 退款 -->
	<u-mask :show="prizeType==2 ? true : false" @click="prizeType=0">
		<view class="prizeBox">
			<view class="content">
					<image class="icon" src="../../../static/images/index/tixin.png" mode=""></image>
					<view class="text">
						已退款
					</view>
					<view class="tips">
						你未拼中奖品，款项已原路退回
					</view>
					<view class="btn" @click="goThisActiveDetail">
						去看看
					</view>
			</view>
		</view>
	</u-mask>
	
	<view class="joinRecord"  @click="junit('/pages/index/mangHeBox/allJoinList')">
		参与记录
	</view>
	
	</view>
</view>		
</template>

<script>
import bottomPopup  from "@/components/bottom-popup/bottom-popup.vue"
import redEnvelope  from "@/components/redEnvelope/redEnvelope.vue"

	export default {
		data() {
			return {
				infoArr:[
					{
						label:'余额',
						num:'0.00',
						path:'/pages/prefile/my-balance/my-balance'
					},
					{
						label:'盲盒积分',
						num:'0.00',
						path: '/pages/prefile/mangHeJiFen/mangHeJiFen',
					},
					{
						label:'石榴籽',
						num:'0.00',
						path:'/pages/prefile/shiLiuZi/shiLiuZi',
					},
				],
				redEnvelopeArr:[ ],
				arrType:[
					{
						name:'参与列表',
						type: 1 ,
					},
					{
						name:'奖品说明',
						type: 2,
					},
				],
				arrActiveType: 0 ,
				detailObj:{},
				ParticipateArr:[],//参与列表
				selectPayArr:[
					{
						label: '微信支付',
						id: '0',
						val: false,
					},
					{
						label: '余额支付(可用:￥0.00)',
						id: '0',
						val: false,
					},
					{
						label: '是否使用盲盒积分(可用:1250)',
						id: '0',
						val: true,
					},
				],
				activeId : '',
				btnType: 1,//1 选择中奖按钮 2 邀请好友领红包 3 活动结束
				prizeType: 0,//中奖状态  1中奖 2退款
				giftArr:[ ],
				// cycleBool : true,//定时器
				joinMyIndex : -1,//自己参加活动的索引
				activity_periods : '',//期号
				// myJoinBool: false,
			};
		},
		onLoad({id}) {
			this.activeId = id
			this.getDetail(id)
			this.getMemberInfo()
			// this.cycle()
		},
		methods:{
			goThisActiveDetail(){
				this.junit('/pages/index/mangHeBox/joinDetail',{activity_id: this.detailObj.id, activity_periods : this.activity_periods})
			},
			// 红包组件开发时的监听事件
			goLuckyDraw(){
				if( this.ParticipateArr.length == this.detailObj.joiner_limit){
					// 检查是否中奖
					this.examinePrize()
					this.btnType = 3
				}
			},
			// 分享
			onShare(){
				// let that = this
				// uni.getProvider({
				// 	service : 'share',
				// 	success : function (res){
				// 		console.log(res)
				// 		uni.share({
				// 			provider : res.provider[0],
				// 			scene : 'WXSceneSession',
				// 			title: '和我一起拼图，免费领取红包！',
				// 			href : `/pages/index/mangHeBox/detail?id=${that.activeId}`,
				// 			success: function(res){
				// 				uni.showToast({
				// 				    title:'分享成功'
				// 				})
				// 				console.log(res);
				// 			},
				// 			fail: function(err){
				// 				uni.showToast({
				// 				    title:'分享失败',
				// 				    icon:'none'
				// 				})
				// 				console.log(err);
				// 			}
				// 		})
				// 	}
				// })
				
				
			},
			joinBtn(){
				if(this.btnType === 1){
					let joining = true
					this.getMemberInfo(joining)
				}else if(this.btnType === 2){
					return
				}
			
			},
			joinActive(_pay_type){
				let pay_type 
				pay_type = _pay_type
				if(this.selectPayArr[0].val){
					pay_type = 1
				}else if(this.selectPayArr[1].val){
					pay_type = 2
				}
				
				if(!pay_type){
					return uni.showToast({
					    title: '请先选择支付方式',
					    duration: 3000,
					    icon: 'none'
					});
				}
				
				if(pay_type == 2 && Number(this.infoArr[0].num) < Number(this.detailObj.activity_amount)){
					// console.log(this.detailObj.activity_amount);
					// console.log(this.infoArr[0].num);
					return uni.showToast({
					    title: '您的余额不足',
					    duration: 3000,
					    icon: 'none'
					});
				}
				
				let use_point = this.selectPayArr[2].val ? 1 : 0
				//  pay_type=3 积分支付
				use_point = pay_type == 3 ? 1 : 0
				
				this.myHttp({
					url:'/addons/yun_shop/api.php',
					data:{
						route : 'plugin.blind-box.frontend.activity.join',
						client_type : 2,
						activity_id: this.activeId,
						pay_type,//1 微信 2余额
						use_point ,//是否使用盲盒积分抵扣 0否 1是
						activity_periods : this.detailObj.activity_periods,
					}
				}).then((res)=>{
				
					this.$refs.redEnvelope.showType = 1
					if(res.result == 1 && pay_type !=1 ){
						// 余额支付
						this.$refs.selectPay.show = false
						let giftArr = []
						if(res.data.award_allowance != 0.00){
							this.$refs.redEnvelope.giftArr[0].text = `${res.data.award_allowance}元红包`
						}
						if(res.data.award_point != 0.00){
							this.$refs.redEnvelope.giftArr[1].text = `${res.data.award_point}盲盒积分`
						}
						if(res.data.award_coupon){
							this.$refs.redEnvelope.giftArr[2].text = `${res.data.award_coupon.name}`
						}
						
						// this.$refs.redEnvelope.giftArr = giftArr
						this.$refs.redEnvelope.show = true
						this.getMemberInfo()
						this.getDetail(this.activeId)
						// this.getParticipateArr(this.activeId)
					}else if(res.result== '1' && pay_type==1){
						// 微信支付
						console.log('微信支付');
						console.dir(res.data);
						this.wxMiniProgramPay(res)
					}else if(res.result== '0'){
						console.log( res.msg);
						uni.showModal({
						    title: '提示',
						    content: res.msg+',请不要重复参加！',
						});
					}
					// 改变按钮状态
					this.btnType = 2
				})
			},
			goPay(){
				this.joinActive()
				// this.$refs.selectPay.show = false
				// this.$refs.redEnvelope.show = true
			},
			changeSelectPay(_index){
				console.log(_index);
				if(_index != 2){
					this.selectPayArr[_index].val = !this.selectPayArr[_index].val
					if(this.selectPayArr[_index].val == true){
						_index==0 ? this.selectPayArr[1].val = false : this.selectPayArr[0].val = false
					}
					
				}else if(_index == 2){
					this.selectPayArr[2].val = !this.selectPayArr[2].val
				}
			},
			// 打开红包  =>选择支付方式
			openRedEnvelope(_index){
				// this.joinMyIndex = _index
				// console.log(_index);
				// console.log(`用户积分=`+this.infoArr[1].num);
				// console.log(`需要积分`+this.detailObj.activity_amount);
				
				if(this.btnType == 2){
					return uni.showToast({
						title:'您已领取，去邀请好友加速开奖吧！',
						icon: 'none',
						duration: 3000
					})
				}
				
				if(	this.btnType != 1){
					return
				}
				
				
				if(Number(this.infoArr[1].num) >= Number(this.detailObj.activity_amount)){
					// 积分充足
					let that = this
					return uni.showModal({
						title: '提示',
						content: '您当前的积分充足，是否花费积分抽取红包？',
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
								let pay_type = 3
								that.joinActive(pay_type)
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					
						
						// 积分充足
				}
				
				this.joinBtn()
			},
			changeArrType(_index){
				this.arrActiveType = _index
			},
			async getDetail(_id){
				await this.myHttp({
					url:'/addons/yun_shop/api.php',
					data:{
						route : 'plugin.blind-box.frontend.activity.info',
						id:_id,
					}
				}).then((res)=>{
					if(res.result== '1'){
						this.detailObj = res.data
						this.getParticipateArr(_id)
					}
				})
			},
			// 参与列表
			async getParticipateArr(_id){
				await this.myHttp({
					url:'/addons/yun_shop/api.php',
					data:{
						route : 'plugin.blind-box.frontend.activity.joiners',
						activity_id:_id,
						is_pay : 1,
					},
					noLoading : true,
				}).then((res)=>{
					let uid = uni.getStorageSync('userInfo').uid
					if(res.result== '1'){
						this.ParticipateArr = []
						this.redEnvelopeArr = [] //页面红包的数组
						// let arr = [] //临时存红包数组
						this.ParticipateArr = res.data.data
						// let myJoinBool = false //判断自己有没有参加
						this.$refs.redEnvelope.showType = 1//改变红包状态
						
						this.btnType = 1
						
						// 已参加的人
						if(this.ParticipateArr.length){
							 this.activity_periods = this.ParticipateArr[0].activity_periods   //期号
							
							this.ParticipateArr.forEach(item=>{
								let obj = {
									val : 2,// 1 领  2已领取 人满后公布 3.中奖金额
								}
								if(item.member.uid == uid){
									// myJoinBool = true
									this.btnType = 2
									obj.money = item.allowance
									obj.val = 3
									// if( this.joinMyIndex != -1){
									// 	obj.activeIndex = this.joinMyIndex
									// }
								}
								this.redEnvelopeArr.push(obj)
								// arr.push(obj)
							})
						}
						
						
						// 未参与人数
						for (let i = 0; i < this.detailObj.joiner_limit - this.ParticipateArr.length; i++) {
							let obj = {
								val : 1,
							}
							this.redEnvelopeArr.push(obj)
							// arr.push(obj)
						}
						
						// console.log(this.redEnvelopeArr);
						
						// if( this.ParticipateArr.length == this.detailObj.joiner_limit && myJoinBool == true){
						// 	// 检查是否中奖
						// 	this.examinePrize()
						// 	this.btnType = 3
						// }
						
						// 重新排序红包 展示自己点击的
						// if(this.joinMyIndex != -1){
						// 	this.redEnvelopeArr = arr
							
						// 	let replaceItem = arr[this.activeIndex]
						// 	// arr[this.activeIndex]
						// 	this.redEnvelopeArr.forEach((item,index)=>{
						// 		if(item.activeIndex){
						// 			arr[this.activeIndex] = arr[index]
						// 			arr[index] = replaceItem
						// 		}
						// 	})
						// 	this.joinMyIndex = -1
						// }
						// this.redEnvelopeArr = arr
						
						uni.stopPullDownRefresh()
					}
				})
			},
			// 会员信息
			async getMemberInfo(_joining){
				await this.myHttp({
					url:'/addons/yun_shop/api.php',
					data:{
						route : 'member.member.get-user-info',
					}
				}).then((res)=>{
					if(res.result== '1'){
						this.infoArr[0].num = res.data.credit.data
						this.selectPayArr[1].label = `余额支付(可用:￥${res.data.credit.data})` 
						this.infoArr[1].num = res.data.integral.data
						this.selectPayArr[2].label = `'是否使用盲盒积分(可用:${res.data.integral.data}))`
						this.infoArr[2].num =  res.data.love_show.usable_data  
						if(_joining){
							this.$refs.selectPay.show = true
						}
					}
				})
			},
			// 检查是否中获
			async examinePrize(){
				await this.myHttp({
					data:{
						route : 'plugin.blind-box.frontend.activity.check-winner',
						activity_id : this.activeId
					}
				}).then((res)=>{
					if(res.result== '1'){
						if(res.data.is_winner==0){
							// 没有中奖
							this.prizeType = 2
							
						}else if(res.data.is_winner==1){
							// 中奖
							this.prizeType = 1
							let giftArr = []
							if(res.data.win_slz_nums != 0){
								giftArr.push(`${res.data.win_slz_nums}个石榴籽`)
							}
							if(res.data.win_slg_nums != 0){
								giftArr.push(`${res.data.win_slg_nums}个石榴果`)
							}
							this.giftArr = giftArr
						}
						this.btnType = 1
						// console.log('执行下场活动');
						this.getParticipateArr(this.activeId)
					}
				})
			},
			// 微信小程序支付
			async wxMiniProgramPay(result) {
				let that = this;
				// let result = await this.prepay();
				uni.requestPayment({
					provider: 'wxpay',
					nonceStr: result.data.config.nonceStr,
					timeStamp: result.data.config.timestamp,
					package: result.data.config.package,
					paySign: result.data.config.paySign,
					signType: 'MD5',
					success: res => {
						uni.showToast({
						    title: '支付成功',
						    duration: 3000,
						    icon: 'success'
						});
						that.wxJoinActive()
					},
					fail: err => {
						return uni.showToast({
						    title: '支付取消或者失败',
						    duration: 3000,
						    icon: 'none'
						});
					}
				});
			},
			// 微信支付成功调查红包
			wxJoinActive(){
				this.myHttp({
					data: {
						route : 'plugin.blind-box.frontend.activity.get-my-allowance',
						activity_id : this.activeId,
						activity_periods : this.detailObj.activity_periods,
					}
				}).then(res=>{
					if(res.result == 1){
						this.$refs.selectPay.show = false
						this.$refs.redEnvelope.show = true
						let giftArr = []
						if(res.data.award_allowance != 0.00){
							// giftArr.push(`${res.data.award_allowance}元红包`)
							this.$refs.redEnvelope.giftArr[0].text = `${res.data.award_allowance}元红包`
						}
						if(res.data.award_point != 0.00){
							// giftArr.push(`${res.data.award_point}盲盒积分`)
							this.$refs.redEnvelope.giftArr[1].text = `${res.data.award_point}盲盒积分`
						}
						if(res.data.award_coupon){
							// giftArr.push(`${res.data.award_coupon.name}优惠券`)
							this.$refs.redEnvelope.giftArr[2].text = `${res.data.award_coupon.name}优惠券`
						}
						
						// this.$refs.redEnvelope.giftArr = giftArr
						this.$refs.redEnvelope.show = true
						this.getMemberInfo()
						this.getParticipateArr(this.activeId)
					}
				})
			},
			// cycle(){
			// 	let that = this
				
			// 	let cycleObj = setInterval(()=>{
			// 		if(that.cycleBool){
			// 			that.getParticipateArr(that.activeId,)
			// 		}else{
			// 			clearInterval(cycleObj)
			// 		}
			// 	},3000)
			// },
		},
		onUnload() {
			//  一般页面用onUnload 清楚定时器
			// this.cycleBool  = false
		},
		  /**
		     * 分享当前页面
		     */
		onShareAppMessage() {
		    // const app = this
		    // 构建页面参数
		    // const params = app.$getShareUrlParams({ id: app.id });
		    return {
		    title: this.detailObj.share_title,
		    desc: this.detailObj.share_desc,
		    imageUrl: this.detailObj.share_icon,
		    path: `/pages/index/mangHeBox/detail?id=${this.activeId}` ,
		    }
		},
		onPullDownRefresh(){
			this.getParticipateArr(this.activeId)
		},
		components:{
			bottomPopup,redEnvelope,
		},
		filters:{
			
		},
	}
</script>
<style lang="scss" scoped>
	.animationBtn{
		animation: animationBtn 1s ease infinite;
		animation-direction : alternate;//动画先向前播放，然后向后
	}
	@keyframes animationBtn{
		 0% {
				transform:scale(1)
		    }
		100% {
			transform:scale(1.3)
		}
	}
	
	
	.prizeBox{
		width: 100vw;
		height: 100vh;
		background: rgba(0,0,0,0.2);
		display: grid;
		place-items: center;
		position: fixed;
		top: 0;
		z-index: 10;
		.winContent{
			width: 100%;
			display: flex;
			justify-content: center;
			position: relative;
			iamge{
				width: 100vw;
			}
			.closeIcon{
				position: absolute;
				top: -17%;
				left: 50%;
				transform: translateX(-50%);
				width: 80rpx;
				height: 80rpx;
				border: 4rpx solid #fff;
				display: grid;
				place-items: center;
				border-radius: 50%;
			}
			.giftArr{
				position: absolute;
				top: 20%;
				left: 50%;
				transform: translateX(-50%);
				display: flex;
				flex-direction: column;
				align-items: center;
				color: #B18035;
				.tipsText{
					margin-bottom: 10rpx;
				}
				.giftItem{
					
				}
			}
		}
		.content{
			width: 540rpx;
			height: 419rpx;
			background: #FFFFFF;
			background: #FFFFFF;
			border-radius: 10rpx;
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			.icon{
				position: absolute;
				top: -30%;
				left: 50%;
				transform: translateX(-50%);
				width: 218rpx;
				height: 218rpx;
			}
			.text{
				margin-top: 120rpx;
				font-weight: bold;
				color: #000000;
				font-size: 36rpx;
			}
			.tips{
				margin: 61rpx 0 55rpx;
				font-weight: 400;
				color: #6E6D6D;
				font-size: 28rpx;
			}
			.btn{
				width: 461rpx;
				height: 65rpx;
				background: #FF6027;
				border-radius: 33rpx;
				display: grid;
				place-items: center;
				color: #fff;
			}
		}
	}
</style>	
<style lang="scss" scoped>
	.selectPay{
		display: flex;
		flex-direction: column;
		width: 750rpx;
		height: 651rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 40rpx 26rpx;
		.title{
			width: 100%;
			display: grid;
			place-items: center;
			font-size: 35rpx;
			font-weight: 600;
			color: #000;
		}
		.selectArr{
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			.selectItem{
				display: flex;
				justify-content: space-between;
				.label{
					color: #000000;;
					font-weight: 600;
					font-size: 32rpx;
				}
				.right-box{
					
				}
			}
		}
		.btn{
			width: 700rpx;
			height: 102rpx;
			background: #FF652E;
			border-radius: 51rpx;
			display: grid;
			place-items: center;
			font-size: 32rpx;
			color: #FFFFFF;
		}
	}
</style>
<style lang="scss" scoped>
.joinRecord{
	position: fixed;
	top: 23%;
	right: 2%;
	display: grid;
	place-items: center;
	color: #fff;
	background-color: #ffe086; 
	height: 80rpx;
	width: 200rpx;
	border-radius: 40rpx;
	z-index: 10;
}	
	
.page{
	background-color: #C54F43;
	width: 100%;
	// height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	.info{
		display: flex;
		align-items: center;
		justify-content: space-around;
		height: 135rpx;
		width: 100%;
		border-radius: 0 0 20rpx 20rpx;
		background-color: #fff;
		position: relative;
		.infoItem{
			.lbale{
				color: #808080;
				font-size: 24rpx;
				margin-bottom: 19rpx;
			}
			.num{
				color: #C54F43;
				font-size: 40rpx;
			}
		}
		&:before{
			content: '';
			position: absolute;
			bottom: -300rpx;
			left: 50%;
			transform: translateX(-50%);
			background-color: #C54F43;
			width: 300rpx;
			height: 300rpx;
			border-radius: 0 350rpx 0 0 ;
			z-index: 10;
		}
		&::after{
			content: '';
			position: absolute;
			bottom: -300rpx;
			right: 50%;
			transform: translateX(50%);
			background-color: #C54F43;
			width: 300rpx;
			height: 300rpx;
			border-radius:  350rpx 0 0 0 ;
			z-index: 10;
		}
		.utilBox{
			content: '';
			position: absolute;
			z-index: 5;
			bottom: -30%;
			height: 50rpx;
			width: 300rpx;
			background-color: #fff;
		}
	}
	
	.tips{
		font-size: 47rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFE5BC;
		margin-top: 75rpx;
		z-index: 10;
		display: grid;
		place-items : center;
		.desc{
			font-size: 29rpx;
			margin-top: 22rpx;
			font-weight: 400;
			color: #FFE5BC;
		}
	}
	.box{
		margin-top: 60rpx;
		padding-bottom: 30rpx;
		width: 690rpx;
		// height: 734rpx;
		background: #A72A24;
		border: 3rpx solid #F1CA80;
		border-radius: 30rpx;
		z-index: 10;
		display: flex;
		flex-direction: column;
		align-items: center;
		.content{
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			margin-bottom: 36rpx;
			.contentItem{
				width: 166rpx;
				height: 188rpx;
				background-color: #E96650;
				margin: 36rpx 13rpx 0;
				border-radius: 12rpx;
				position: relative;
				overflow: hidden;
			}
			.getItem{
				&:after{
					content: '';
					position: absolute;
					top: -70%;
					left: 50%;
					transform: translateX(-50%);
					box-shadow: 0 14rpx 12rpx rgba(0, 0, 0, 0.3);
					width: 205rpx;
					height: 205rpx;
					border-radius: 50%;
					background-color: transparentize;
					border: 2rpx solid #F0A863;
					z-index: 5;
				}
				.text{
					position: absolute;
					left: 50%;
					margin-top: 30rpx;
					transform: translateX(-50%);
					width: 80rpx;
					height: 80rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: 500;
					font-size: 40rpx;
					background-color: #FBCC81;
					color: #EA3506;
					border-radius: 50%;
					z-index: 10;
				}
			}
			.gotItem{
					box-shadow: 0px 14rpx 12rpx  rgba(0, 0, 0, 0.3),10px 10px 13px #ED7F65 inset;
					width: 235rpx;
					height: 235rpx;
					border-radius: 50%;
					background-color: transparentize;
					border: 2rpx solid #F0A863;
					position: relative;
					top: -55%;
					left: 50%;
					transform: translateX(-50%);
					overflow: hidden;
				.textBox{
					position: relative;
					left: 50%;
					top: 50%;
					width: 140rpx;
					transform: translateX(-50%);
					height: 50%;
					font-weight: 500;
					font-size: 24rpx;
					background-color: #ffe5bc;
					color: #e85341;
					border-radius: 10rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					&::after{
						content:'';
						position: absolute;
						left: -7%;
						top: 55%;
						border-radius: 50%;
						width: 20rpx;
						height: 20rpx;
						background-color: #e96650;
					}
					&::before{
						content:'';
						position: absolute;
						right: -7%;
						top: 55%;
						border-radius: 50%;
						width: 20rpx;
						height: 20rpx;
						background-color: #e96650;
					}
					.textTop{
						padding-bottom: 50rpx;
						color: #e85341;
						.textBottom{
							position: absolute;
							left: 7%;
							top: 45%;
						}
					}
				}
			}
		}
		text{
			font-size: 29rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ffe5bc;
		}
		.btn{
			margin-top: 55rpx;
			width: 579rpx;
			height: 100rpx;
			background: #FCBF33;
			border: 5px solid #FFE086;
			box-shadow: 0px 3rpx 84rpx 0px rgba(247, 217, 173, 0.86);
			border-radius: 50px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 35rpx;
			color: #F3271D;
			.waitingBtn{
				width: 564rpx;
				height: 86rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #C4B184;
				// border: 5px solid #FFE086;
				color: #A19068;
				border-radius: 50px;
			}
		}
		
	}

	.arr{
		width: 686rpx;
		// height: 586rpx;
		min-height: 586rpx;
		background: #CF604F;
		border-radius: 20rpx;
		margin-top: 30rpx;
		margin-bottom: 60rpx;
		font-family: PingFang SC;
		.arrType{
			display: flex;
			align-items: center;
			height: 88rpx;
			font-size: 33rpx;
			font-weight: 500;
			color: #E1D192;
			.typeItem{
				flex: 1;
				background: #E1D192;
				color: #C54F43;
				height: 100%;
				display: grid;
				place-items: center;
				border-radius: 0 0 20rpx 20rpx;
			}
			.activeTypeItem{
				background: #CF604F !important;
				color: #E1D192 !important;
			}
		}
		.arrContent{
			.detailObjDest{
				display: flex;
				margin-top: 30rpx;
				justify-content: center;
			}
			.arrItem{
				display: flex;
				align-items: center;
				height: 156rpx;
				margin: 0 24rpx;
				border-bottom: 2rpx solid #E5816A;
				image{
					width: 85rpx;
					height: 85rpx;
					border-radius: 50%;
					margin-right: 13rpx;
				}
				.desc{
					font-size: 24rpx;
					color: #FFE5BC;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					.name{
						
					}
					.time{
						margin-top: 10rpx;
					}
					
				}
				
			}
			.moreText{
				display: grid;
				margin-top: 43rpx;
				margin-bottom: 20rpx;
				place-items: center;
				
				color: #DBBF93;
			}
		}
	}
}
</style>
